<template>
  <div>
    <ListContainer title="拼团订单列表"
                   ref="GroupList"
                   resource-uri="group/group"
                   resource-name="group"
                   :params="params"
                   v-on:fetched="onFetched">

      <div slot="items">
        <el-table
          :data="items"
          border
          style="width: 100%">
          <el-table-column type="expand">
            <template scope="props">
              <ParticipationList :group_id="props.row.id"></ParticipationList>
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="拼团编号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="groupname"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="createtime"
            width="180"
            label="创建时间">
            <template scope="scope">
              {{scope.row.createtime|formatDatetime}}
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            label="创建用户">
            <template scope="prop">
              <el-button type="text" @click="showUser('用户资料', prop.row.user.id)">{{prop.row.user.nickname}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            width="140"
            label="参团人数">
            <template scope="prop">
              {{prop.row|formatBeingGroupNums}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </ListContainer>

    <el-dialog v-bind:title="userView.title" v-model="userView.visible" size="small">
      <div style="width: 100%; overflow: hidden;">
        <User v-bind:user-id="userView.userId"></User>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ListContainer from '../ListContainer.vue'
  import ParticipationList from './ParticipationList.vue'
  import User from '../User/User.vue'
  import Moment from 'moment'

  export default {
    data () {
      return {
        items: [],
        userView: {
          visible: false,
          title: null,
          userId: null
        }
      }
    },
    filters: {
      formatDatetime (timestamp) {
        return Moment(timestamp, 'X').format('YYYY-MM-DD HH:mm:ss')
      },
      formatBeingGroupNums (row) {
        let participationNums = 0
        participationNums += ~~row['male_participation_nums'] || 0
        participationNums += ~~row['female_participation_nums'] || 0
        return participationNums + '/' + row['group_setting']['being_group_nums']
      }
    },
    components: {
      ListContainer,
      ParticipationList,
      User
    },
    methods: {
      onFetched: function (data) {
        this.items = data
      },
      showUser: function (title, userId) {
        console.log(userId)
        this.userView.title = title
        this.userView.userId = userId
        this.userView.visible = true
      }
    }
  }
</script>

<style lang="css" scope="scope">
  div.el-card__header {
    padding: 10px 10px;
  }
  div.el-card__header.title {
    margin-bottom: 0;
  }
  .title button.el-button {
    display: none;
  }
  table.el-table__header, table.el-table__body {
    width: 100% !important;
  }
  td.el-table__expanded-cell {
    padding: 5px;
  }
</style>
